<template>
  <div class="banner">
    <div class="header">
      <a-input-search
        v-model:value="data.search"
        placeholder="input search text"
        style="width: 200px"
        @search="onSearch"
      />
      <a-button
        type="primary"
        :size="'Large'"
        @click="$router.push('/userCreate')"
      >添加</a-button>
    </div>
    <a-table
      :scroll="scroll"
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="data.tableList"
      :loading="loading"
      :rowKey="(record: any) => record.id"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">
          <a>{{ text }}</a>
        </template>
        <template v-if="column.dataIndex === 'updatedAt'">
          {{ text }}
        </template>
        <template v-if="column.dataIndex === 'status'">
          <a-tag :color="text ? 'green' : 'red'">{{ text ? '开启' : '关闭' }}</a-tag>
        </template>
        <template v-if="column.dataIndex === 'id'">
          <a-button
            type="primary"
            style="marginRight:10px"
            ghost
            @click="$router.push(`/userEdit/${text}`)"
          >编辑</a-button>
          <a-button
            type="primary"
            ghost
            @click="$router.push(`/change/${text}`)"
          >修改密码</a-button>
          <a-button
            style="marginLeft:10px"
            type="primary"
            danger
            ghost
          >删除</a-button>
        </template>
      </template>
    </a-table>
    <router-view name="path"></router-view>
  </div>
</template>

<script setup lang="ts">
import baseUrl from "@/uitils/baseUrl";
import { reactive, ref, computed } from "vue";
import dayjs from "dayjs";
import type { TableProps, TableColumnType } from "ant-design-vue";
import { getuser } from "@/api/user";
import { Key } from "ant-design-vue/lib/_util/type";
const loading = ref(false);
const data: any = reactive({
  search: "",
  total: 0,
  tableList: [],
});
const onSearch = () => {
  getlist();
};
const scroll: any = {
  y: "100%",
};
interface DataType {
  name: string;
  id: string;
}
const columns: TableColumnType<DataType>[] = [
  {
    title: "用户名",
    dataIndex: "name",
  },

  {
    title: "更新时间",
    dataIndex: "updatedAt",
  },

  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: "操作",
    dataIndex: "id",
  },
];
const getlist = () => {
  loading.value = true;
  getuser({ keyword: data.search, page: 1, limit: 10 }).then((res: any) => {
    data.total = res.total;
    data.tableList = res.data.map((item: any) => {
      item.updatedAt = dayjs(item.updatedAt).format("YYYY-MM-DD hh:mm:ss");
      return item;
    });
    data.search = "";
    loading.value = false;
  });
};
getlist();
const rowSelection: TableProps["rowSelection"] = {
  onChange: (selectedRowKeys: Key[], selectedRows: DataType[]) => {
    console.log(selectedRowKeys);
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === "Disabled User",
    name: record.name,
  }),
};
</script>

<style scoped lang="scss">
.banner {
  overflow: auto;
  height: 85vh;

  .header {
    display: flex;
    justify-content: space-between;
  }
}

.p1 {
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>